<script setup>
import { defineProps, defineEmits } from "vue";
import { ElImage, ElIcon } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';

const props = defineProps(["data"]);
const emit = defineEmits(["close"]);

// 咨询师数据
const consultants = [
  {id: 1, name: "张三"},
  {id: 2, name: "李四"},
  {id: 3, name: "王五"},
  {id: 4, name: "赵六"}
];

// 获取咨询师名称
const getConsultantName = (id) => {
  return consultants.find(c => c.id === id)?.name || '未知';
};

// 处理图片URL
const getImageUrl = (imgPath) => {
  if (!imgPath) return '';
  return `/api/img?imgUrl=${encodeURIComponent(imgPath)}`;
};
</script>

<template>
  <div class="view-container">
    <el-form :model="props.data" label-width="100px">
      <!-- ID -->
      <el-form-item label="ID：">
        <el-input :model-value="props.data.id" disabled />
      </el-form-item>

      <!-- 标题 -->
      <el-form-item label="标题：">
        <el-input :model-value="props.data.title" readonly />
      </el-form-item>

      <!-- 图片 -->
      <el-form-item label="图片：">
        <div class="image-display">
          <el-image
              v-if="props.data.image"
              :src="getImageUrl(props.data.image)"
              :preview-src-list="[getImageUrl(props.data.image)]"
              fit="contain"
              class="preview-image"
              hide-on-click-modal
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
          <div v-else class="empty-image">
            <el-icon><Picture /></el-icon>
            <span>暂无图片</span>
          </div>
        </div>
      </el-form-item>

      <!-- 简介 -->
      <el-form-item label="简介：">
        <el-input
            :model-value="props.data.intro"
            type="textarea"
            :rows="3"
            readonly
        />
      </el-form-item>

      <!-- 详细内容 -->
      <el-form-item label="详细内容：">
        <el-input
            :model-value="props.data.content"
            type="textarea"
            :rows="5"
            readonly
        />
      </el-form-item>

      <!-- 咨询师 -->
      <el-form-item label="咨询师：">
        <el-input
            :model-value="getConsultantName(props.data.consultantId)"
            readonly
        />
      </el-form-item>

      <!-- 发布时间 -->
      <el-form-item label="发布时间：">
        <el-input
            :model-value="props.data.publishTime"
            readonly
        />
      </el-form-item>
    </el-form>

    <div class="action-buttons">
      <el-button type="info" @click="emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<style scoped>
.view-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 输入项样式 */
:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  box-shadow: none;
  cursor: default;
}

/* 图片显示区域 */
.image-display {
  width: 100%;
  max-width: 400px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f7fa;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.empty-image,
.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.empty-image .el-icon,
.image-error .el-icon {
  font-size: 40px;
  margin-bottom: 8px;
  color: #c0c4cc;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

/* 表单间距调整 */
.el-form-item {
  margin-bottom: 18px;
}
</style>